<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.5.1.min.js"></script>
    <script src="./echarts-5.6.0.min.js"></script>
</head>

<body>
    kds
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));

        var option = {
            title: {
                text: 'ECharts Introduction Example'
            },
            tooltip: {},
            xAxis: {
                data: ["shirt", "cardigan", "chiffon", "pants", "heels", "socks"]
            },
            yAxis: {},
            series: [{
                name: 'Sales',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        myChart.setOption(option);
        $(document).ready(function () {
            // Resize the chart when the window is resized
            $(window).resize(function () {
                myChart.resize();
            });
        });
    </script>
</body>

</html>